<!-- A.html -->
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>A</title>
	</head>

	<body>
		<!-- 
        window提供的 opener 接口返回一个打开当前页面的页面的一个引用，
        换句话说，如果A页面打开B，那么B页面的opener将返回A。
        通过这种方式，我们可以在A页面定义全局的方法挂载在window上，
        那么B页面就可以通过opener拿到A页面的方法从而控制A页面的行为。
    -->

		<h1>A 页面</h1>
		<button type="button" onclick="openB()">B</button>
		<script>
			window.name = 'A';
			let B = null;
			function openB() {
				B = window.open('B.html?code=123', 'B'); // 返回 B window
				// B.opener = null // 如果B页面不用opener可以重置，防止安全问题,如果是a标签，则  <a href="" target="_blank" rel='noopener'></a>
			}

			window.addEventListener('message', receiveMessage, false);

			// message 事件回调
			function receiveMessage(event) {
				console.log('收到消息：', event.data);
			}

			function changeColor(color) {
				document.body.style.background = color;
			}
		</script>
	</body>
</html>
